<nav class="site-nav">
  <div class="container">
    <div class="row">
      <div class="col-12@sm site-nav__content">
        <a class="site-nav__logo" href="{{ site.baseurl }}/">
          <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414">
            <title>Shuffle.js logo</title>
            <rect x="2" y="2" width="8" height="18" fill="#2dcb71"/>
            <rect x="12" y="2" width="8" height="8" fill="#9b59b5"/>
            <rect x="22" y="2" width="8" height="12" fill="#f39b11"/>
            <rect x="2" y="22" width="8" height="8" fill="#e74b3b"/>
            <rect x="12" y="12" width="8" height="8" fill="#3397db"/>
            <rect x="22" y="16" width="8" height="4" fill="#1abb9b"/>
            <rect x="12" y="22" width="18" height="8" fill="#33495d"/>
          </svg>
          <span class="site-nav__name">Shuffle.js</span>
        </a>
        <div class="site-nav__links">
          <div class="site-nav__link site-nav__link--dropdown">
            <button class="site-nav__link-toggle btn" id="docs-dropdown-btn" aria-label="Click to reveal list of Shuffle demos" aria-haspopup="true" aria-controls="docs-dropdown" aria-expanded="false">Docs</button>
            <div class="site-nav__dropdown site-nav__dropdown--simple-links" id="docs-dropdown" aria-labelledby="docs-dropdown-btn">
              <ol class="unstyled">
                <li><a href="{{ site.baseurl }}/#install">Install</a></li>
                <li><a href="{{ site.baseurl }}/#features">Features</a></li>
                <li><a href="{{ site.baseurl }}/#options">Options</a></li>
                <li><a href="{{ site.baseurl }}/#usage">Usage</a></li>
                <li><a href="{{ site.baseurl }}/#filters">Filters</a></li>
                <li><a href="{{ site.baseurl }}/#advanced-filters">Advanced Filters</a></li>
                <li><a href="{{ site.baseurl }}/#sorting">Sorting</a></li>
                <li><a href="{{ site.baseurl }}/#events">Events</a></li>
                <li><a href="{{ site.baseurl }}/#adding-removing">Adding and Removing Items</a></li>
                <li><a href="{{ site.baseurl }}/#public-methods">Public Methods</a></li>
                <li><a href="{{ site.baseurl }}/#custom-styles">Custom Styles</a></li>
                <li><a href="{{ site.baseurl }}/#dependencies">Dependencies</a></li>
                <li><a href="{{ site.baseurl }}/#supported-browsers">Supported Browsers</a></li>
                <li><a href="{{ site.baseurl }}/#changelog">Changelog</a></li>
              </ol>
            </div>
          </div>
          <div class="site-nav__link site-nav__link--dropdown">
            <button class="site-nav__link-toggle btn" id="demos-dropdown-btn" aria-label="Click to reveal list of Shuffle demos" aria-haspopup="true" aria-controls="demos-dropdown" aria-expanded="false">Demos</button>
            <div class="site-nav__dropdown" id="demos-dropdown" aria-labelledby="demos-dropdown-btn">
              <ul class="unstyled">
                {% for post in site.data.demos %}
                  <li class="">
                    {% if post.external %}
                    <a href="{{ post.url }}" target="_blank" rel="noopener">
                    {% else %}
                    <a href="{{ site.baseurl }}/{{ post.slug }}">
                    {% endif %}
                      <figure>
                        <picture>
                          <source srcset="{{ site.baseurl }}/img/demos/{{ post.slug }}.webp" type="image/webp">
                          <img src="{{ site.baseurl }}/img/demos/{{ post.slug }}.jpg" alt="{{ post.label }}">
                        </picture>
                        <figcaption>{{ post.label }}</figcaption>
                      </figure>
                    </a>
                  </li>
                {% endfor %}
              </ul>
            </div>
          </div>
          <a class="site-nav__link hidden@xs" href="{{ site.baseurl }}/faq">FAQ</a>
          <a class="site-nav__link hidden@xs" href="https://github.com/Vestride/Shuffle">
            <img class="site-nav__link-img" src="{{ site.baseurl }}/img/github.svg" alt="View Shuffle on GitHub" title="" width="16" height="16">
          </a>
        </div>
      </div>
    </div>
  </div>
</nav>
